<template>
	<layout class="h-100">
		<view class="app-container">
			<!-- 主横幅区域 -->
			<view
				class="main-banner swiperAdsClass"
				:style="{ height: mainBannerWidth - 150 + 'px' }">
				<uv-swiper
					imgMode="aspectFill"
					keyName="image"
					radius="0"
					:circular="true"
					:list="listAds"
					indicatorMode="dot"></uv-swiper>

				<!-- 欢迎信息覆盖层 -->
				<view class="welcome-overlay" v-if="false">
					<view class="greeting-section">
						<text class="greeting-text">
							{{ isLogin ? `您好，${userInfo.nickname}` : '欢迎光临' }}
						</text>
						<text class="subtitle">点餐系统</text>
					</view>

					<!-- 快速状态信息 -->
					<view class="quick-stats" v-if="isLogin && false">
						<view class="stat-item">
							<text class="stat-number">{{ userInfo.couponCount }}</text>
							<text class="stat-label">可用券</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 主要功能区域 -->
			<view class="main-content">
				<!-- 服务选择卡片 -->
				<view class="service-card customBgi">
					<uv-avatar :src="userInfo.avatar" shape="circle"></uv-avatar>
					<view class="service-user-setting">
						<view class="service-user-name">你好 {{ userInfo.nickname }}</view>
						<view class="service-user-info">
							<view
								class="service-user-info_item"
								@tap="
									serv({
										type: 'pages',
										pages: '/pages/components/pages/myBalance/myBalance',
									})
								">
								<text class="label">余额</text>
								<text class="value">{{ isLogin ? member.nowMoney : 0 }}</text>
							</view>

							<view
								class="service-user-info_item"
								@tap="
									serv({
										type: 'pages',
										pages: '/pages/components/pages/balance/bill?cate=1',
									})
								">
								<text class="label">积分</text>
								<text class="value">{{ isLogin ? member.integral : 0 }}</text>
							</view>

							<view
								class="service-user-info_item"
								@tap="
									serv({
										type: 'pages',
										pages: '/pages/components/pages/coupons/coupons',
									})
								">
								<text class="label">优惠券</text>
								<text class="value">{{ isLogin ? member.couponCount : 0 }}</text>
							</view>
							<view
								class="service-user-info_item"
								@tap="
									serv({
										type: 'pages',
										pages: '/pages/components/pages/balance/bill?cate=0',
									})
								">
								<text class="label">历史消费</text>
								<text class="value">
									{{ isLogin ? (member.sumMoney ? member.sumMoney : 0) : 0 }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="service-card">
					<view class="service-header">
						<text class="service-title">选择服务方式</text>
						<!-- <text class="service-subtitle">享受便捷用餐体验</text> -->
					</view>

					<view class="service-options">
						<view class="service-option" @tap="takein">
							<view class="service-icon-wrapper takein">
								<image
									src="http://121.224.76.39:8002/qingzhen/20250823/index002_1755915182792.png"
									mode="aspectFit"
									class="service-icon"></image>
							</view>
							<view class="service-info">
								<text class="service-name">店内自取</text>
								<text class="service-desc">下单免排队，到店即取</text>
							</view>
						</view>

						<view class="service-option" @tap="takeout">
							<view class="service-icon-wrapper takeout">
								<image
									src="http://121.224.76.39:8002/qingzhen/20250823/index003_1755915220276.png"
									mode="aspectFit"
									class="service-icon"></image>
							</view>
							<view class="service-info">
								<text class="service-name">店内堂食</text>
								<text class="service-desc">美味直达，到店堂食</text>
							</view>
						</view>
					</view>
				</view>
				<view class="otherAppBox">
					<!--  -->
					<view
						class="otherApp"
						@tap="
							serv({
								type: 'miniprogram',
								appId: 'wx28c7217a17fddfdd',
								istiyan:true
							})
						">
						<!-- <view class="service-header">
							<text class="service-title">我爱拉面</text>
						</view> -->
						<view class="service-options">
							<image
								mode="widthFix"
								src="http://121.224.76.39:8002/qingzhen/20250823/image_41102840961755850439480_1755850441151_1755915323817.png"
								style="width: 100%; height: 100%"></image>
						</view>
					</view>
					<!-- wxf6b30b800b4f7951 -->
					<view
						class="otherApp"
						@tap="
							serv({
								type: 'miniprogram',
								appId: 'wx3217f08ca3bf50b8',
							})
						">
						<!-- <view class="service-header">
							<text class="service-title">穆天下</text>
						</view> -->
						<view class="service-options">
							<image
								mode="widthFix"
								src="http://121.224.76.39:8002/qingzhen/20250823/image_10610096971755850450431_1755850454302_1755915530947.png"
								style="width: 100%; height: 100%"></image>
						</view>
					</view>
				</view>
				<view class="swiperAdsClass service-card" style="height: 400rpx; padding: 0">
					<uv-swiper
						:circular="true"
						@click="toAds"
						keyName="imageUrl"
						:list="bottomAdsList"
						:radius="10"></uv-swiper>
				</view>
			</view>
		</view>
	</layout>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, watch, onMounted, getCurrentInstance } from 'vue'
	import { menuAds, bottomAds } from '@/api/market'
	import { storeToRefs } from 'pinia'
	import { useMainStore } from '@/store/store'
	import cookie from '@/utils/cookie'
	import { userGetUserInfo } from '@/api/user'
	const main = useMainStore()
	const { store, isLogin } = storeToRefs(main)
	const listAds = ref([])
	const mainBannerWidth = ref(0)
	onMounted(() => {
		mainBannerWidth.value = uni.getSystemInfoSync().windowWidth
	})
	const bottomAdsList = ref([])
	const handGetListAds = async () => {
		let shop_id = store.value.id ? store.value.id : 0
		let data = await menuAds({
			shop_id: shop_id,
		})
		if (data) {
			listAds.value = data.list
		}
	}
	const toAds = e => {
		console.log(e)
		const url = bottomAdsList.value[e].linkUrl
		uni.navigateTo({
			url: '/pages/components/pages/web/web?url=' + encodeURIComponent(JSON.stringify(url)),
		})
	}
	const getBottomAds = async () => {
		const res = await bottomAds({
			position: 1,
		})
		bottomAdsList.value = res.list
	}
	const takein = () => {
		main.SET_ORDER_TYPE('takein')
		uni.switchTab({
			url: '/pages/home/menu',
		})
	}
	const takeout = () => {
		// main.SET_ORDER_TYPE('takeout')
		main.SET_ORDER_TYPE('desk')
		uni.switchTab({
			url: '/pages/home/menu',
		})
	}
	const login = () => {
		uni.navigateTo({
			url: '/pages/components/pages/login/login',
		})
	}
	const serv = item => {
		switch (item.type) {
			case 'pages':
				if (!isLogin.value) {
					login()
					return
				}
				uni.navigateTo({
					url: item.pages,
				})
				break
			case 'miniprogram':
				uni.openEmbeddedMiniProgram({
					appId: item.appId,
					// path: url,
					envVersion: item.istiyan ? 'trial' : '', //跳转体验版（体验版生效）
					extraData: {
						// 'unionId': this.userInfo.unionId
					},
					success(res) {
						// 打开成功
						console.log('跳转成功')
					},
				})
				break
		}
	}

	const goScore = () => {
		uni.navigateTo({
			url: '/pages/components/pages/scoreproduct/list',
		})
	}

	const userInfo = ref({})
	const { proxy } = getCurrentInstance()
	onLoad(async () => {
		await proxy.$getTenantIdByAppId()
		handGetListAds()
		getBottomAds()
	})
	const member = ref({})
	const getUserInfo = async () => {
		let data = await userGetUserInfo()
		if (data) {
			member.value = data
		}
	}
	const indexShowMethod = () => {
		setTimeout(() => {
			userInfo.value = cookie.get('userinfo') || {}
			getUserInfo()
		}, 10)
	}
	onShow(() => {})
	defineExpose({
		indexShowMethod,
	})
</script>

<style lang="scss" scoped>
	.app-container {
		height: 100%;
		overflow: auto;
		&::-webkit-scrollbar {
			display: none;
		}
	}
	/* 主横幅区域 */
	.main-banner {
		width: 100%;
		height: 600rpx;
	}
	.welcome-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: calc(40rpx + var(--status-bar-height, 0)) 40rpx 40rpx;
	}

	.greeting-section {
		.greeting-text {
			display: block;
			color: #ffffff;
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 12rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		}

		.subtitle {
			color: rgba(255, 255, 255, 0.9);
			font-size: 26rpx;
			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		}
	}

	.quick-stats {
		align-self: flex-end;

		.stat-item {
			text-align: center;
			background: rgba(255, 255, 255, 0.2);
			padding: 20rpx;
			border-radius: 20rpx;
			backdrop-filter: blur(10rpx);

			.stat-number {
				display: block;
				color: #ffffff;
				font-size: 32rpx;
				font-weight: bold;
			}

			.stat-label {
				color: rgba(255, 255, 255, 0.9);
				font-size: 22rpx;
			}
		}
	}

	/* 主内容区域 */
	.main-content {
		padding: 30rpx 20rpx 20rpx 20rpx;
		width: 100%;
		background-color: #f5f5f5;
	}

	/* 服务选择卡片 */
	.service-card {
		background: #fff;
		// background-image: url('http://121.224.76.39:8002/qingzhen/20250820/da8ff0e47e19ed74863322f4b003271f_20250820182123_1755687450762.png');
		// background-size: cover;
		// background-repeat: no-repeat;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	}
	.otherAppBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		.otherApp {
			width: calc(50% - 10rpx);
			.service-options {
				width: 100%;
				border-radius: 24rpx;
				overflow: hidden;
			}
		}
	}
	.customBgi {
		// background-image: url('http://121.224.76.39:8002/qingzhen/20250820/da8ff0e47e19ed74863322f4b003271f_20250820182123_1755687450762.png');
		// background-size: cover;
		// background-repeat: no-repeat;
		height: 160rpx;
		display: flex;
		align-items: center;
		.service-user-setting {
			margin-left: 20rpx;
			color: #000;
			.service-user-name {
				// color: #000;
			}
			.service-user-info {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				margin-top: 20rpx;
				.service-user-info_item {
					.label {
						font-size: 26rpx;
						color: #dbb17d;
					}
					.value {
						margin-left: 10rpx;
						margin-right: 20rpx;

						font-weight: bold;
					}
				}
			}
		}
	}
	.service-header {
		margin-bottom: 30rpx;
		.service-title {
			display: block;
			font-size: 34rpx;
			font-weight: bold;
			color: #000;
			margin-bottom: 8rpx;
		}

		.service-subtitle {
			color: #000;
			font-size: 26rpx;
		}
	}

	.service-options {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
	}

	.service-option {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 40rpx 20rpx;
		background: linear-gradient(135deg, #f8f9fa, #f5f5f5);
		background: linear-gradient(135deg, #f5f5f5, #f5f5f5);

		border-radius: 20rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
			border-color: #ee854d;
		}
	}

	.service-icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;

		&.takein {
			background: linear-gradient(135deg, #ffe0b2, #ff9800);
		}

		&.takeout {
			background: linear-gradient(135deg, #e1f5fe, #2196f3);
		}

		.service-icon {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.service-info {
		.service-name {
			display: block;
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
		}

		.service-desc {
			color: #999;
			font-size: 24rpx;
			line-height: 1.3;
		}
	}

	.coupon-decoration {
		background: linear-gradient(135deg, #ff6b6b, #ff8e53);
	}

	.points-decoration {
		background: linear-gradient(135deg, #4caf50, #8bc34a);
	}
</style>
